<template>
	<div class="yh_content">
		<div class="yh_topsearch yh_dis yh_disJub" style="border: none; padding: 0px; margin-top: 20px">
			<div>
				<div class="block yh_dis">
					<div style="margin-left: 10px">
						<div class="yh_qs yh_font13 hei20">老师</div>
						<el-select v-model="search.activities_id" style="width: 140px" size="small" placeholder="请选择">
							<el-option v-for="(item,index) in search.activities" :key="index" :label="item.name"
								:value="item.id" />
						</el-select>
					</div>
					<div style="margin-left: 10px">
						<div class="yh_qs yh_font13 hei20">搜索关键词</div>
						<el-input v-model="search.name" placeholder="课程名称/老师姓名" />
					</div>
					<div style="margin-left: 10px">
						<el-button type="primary" size="small" class="mar-top20 bac6b7"
							@click.stop="suosouClick()">搜索</el-button>
					</div>
				</div>
			</div>
			<div>
				<el-button v-if="juDgeTrue('courseroll_edit')" type="primary" class="mar-top20 bac6b7" size="small" @click.stop="add">新增课程</el-button>
			</div>
		</div>
		<div style="margin-top: 20px">
			<el-table v-loading="listLoading" :data="tableData" stripe style="width: 100%">
				<div slot="empty" class="m-empty-box">
					<div class="mar" style="width: 168px;height: 180px;">
						<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
					</div>
					<div class="title">暂无数据</div>
				</div>
				<el-table-column prop="sort" label="排序" />
				<el-table-column prop="name" label="课程名称	" />
				<el-table-column prop="coach_name" label="教练" />
				<el-table-column prop="long_time" label="课程时长(分钟)" />
				<el-table-column prop="people_num" label="容量(人)" />
				<el-table-column :label="$t('table.actions')" align="center" width="280"
					class-name="small-padding fixed-width">
					<template slot-scope="scope">
						<div class="yh_dis disJuC wid100">
							<div v-if="juDgeTrue('courseroll_look')" class="yh_dis cuPo" style="align-items: center; margin-right: 10px"
								@click.stop="xiangqing(scope.row.id)">
								<i class="el-icon-document" style="color: #6b7cdd; font-size: 20px" />详情
							</div>
							<div v-if="juDgeTrue('courseroll_del')" class="yh_dis cuPo" style="align-items: center; margin-right: 10px"
								@click.stop="deleteClick(scope.row.id)">
								<i class="el-icon-delete" style="color: #6b7cdd; font-size: 20px" />删除
							</div>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
				@pagination="getList" />
		</div>
	</div>
</template>

<script>
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
	import {
		getXuan,
		judgeButton
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex'
	import {
		getVenue
	} from '@/api/venue'
	import {
		getcourseList,
		courseDels
	} from '@/api/coures'
	export default {
		name: 'Courseroll',
		components: {
			Pagination
		},
		data() {
			return {
				list: null,
				total: 0,
				listLoading: false,
				search: {
					activities: [], // 营销活动
					activities_id: 0,
					name: ''
				},
				tableData: null,
				listQuery: {
					page: 1,
					limit: 10
				}
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
					name: '团课',
					url: '/course/courseroll',
					pd: true
				},
				{
					name: '精品课',
					url: '/course/courseBoutique',
					pd: true
				},
				{
					name: '私教课',
					url: '/course/coursePersonal',
					pd: true
				},
				{
					name: '班课',
					url: '/course/courseTeam',
					pd: true
				}
			]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getVen()
		},
		methods: {
			juDgeTrue(name) {
				return judgeButton(name, this.roles)
			},
			getVen() {
				getVenue().then(response => {
					const {
						data
					} = response
					var activities = [{
						id: 0,
						name: '不指定'
					}]
					this.search.activities = activities.concat(data)
					console.log(this.search.activities)
					this.getList()
				}).catch(error => {
					console.log(error)
				})
			},
			add() {
				this.$router.push({
					path: '/course/courseAdd?type=1'
				})
			},
			xiangqing(id) {
				console.log(id)
				this.$router.push({
					path: '/course/courseParticulars?type=1&cid=' + id
				})
			},
			deleteClick(id) {
				this.$confirm('确定删除吗？此操作不可恢复。若课程有预约，删除后会自动取消所有预约，记得及时通知会员。', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消'
				}).then(() => {
					courseDels({
						'id': id // 1团课2精品课3私教课4班课
					}).then(response => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						})
						this.getList()
					}).catch(error => {
						console.log(error)
					})
				})
			},
			suosouClick() {
				this.listQuery = {
					page: 1,
					limit: 0
				}
				this.getList()
			},
			getList() {
				this.listLoading = true
				getcourseList({
					'page': this.listQuery.page,
					'limit': this.listQuery.limit,
					'keyword': this.search.name,
					'coach_id': this.search.activities_id,
					'type': 1 // 1团课2精品课3私教课4班课
				}).then(response => {
					const {
						data
					} = response
					this.tableData = data.data
					this.total = data.total
					this.listLoading = false
				}).catch(error => {
					console.log(error)
					this.listLoading = false
				})
			}
		}
	}
</script>

<style scoped>
	.yh_content {
		padding: 20px;
	}

	.yh_topsearch {
		border: 1px solid #ccc;
		padding: 20px 20px 0px 20px;
	}

	.yh_dis {
		display: flex;
	}

	.yh_disAlc {
		align-items: center;
	}

	.topsearch_item {
		/* padding: 20px; */
	}

	.search_left {
		width: 150px;
		font-size: 12px;
		color: #838383;
	}

	.search_right {
		flex-wrap: wrap;
	}

	.sons {
		margin-left: 20px;
		cursor: pointer;
		font-size: 12px;
		margin-bottom: 15px;
	}

	.choiceme {
		color: #6b7cdd;
		font-size: 12px;
	}

	.yh_xian {
		border-bottom: 1px solid #e7e7e7;
		/* width: 98%; */
		margin: 0px auto;
		margin-bottom: 20px;
	}

	.yh_qs {
		color: #838383;
	}

	.yh_disJub {
		justify-content: space-between;
	}

	.yh_disJuc {
		justify-content: center;
	}

	.yh_font12 {
		font-size: 12px;
	}

	.yh_font13 {
		font-size: 13px;
	}

	::v-deep .el-input__inner {
		height: 32px;
		line-height: 32px;
	}
</style>
